<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Rust代码闯关挑战</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <link href="{{ url_for('static', filename='css/style.css') }}" rel="stylesheet">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
            background-color: #fff3e0;
            background-image: 
                radial-gradient(circle at 10% 20%, rgba(206, 66, 43, 0.05) 0%, transparent 50%),
                radial-gradient(circle at 80% 80%, rgba(247, 76, 0, 0.07) 0%, transparent 50%),
                radial-gradient(circle at 40% 40%, rgba(255, 152, 0, 0.05) 0%, transparent 50%);
            min-height: 100vh;
            color: #333;
            overflow-x: hidden;
        }

        /* 动态背景粒子 */
        .floating-shapes {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 0;
        }

        .shape {
            position: absolute;
            background: rgba(255, 193, 7, 0.1);
            border-radius: 50%;
            animation: float 15s infinite linear;
        }

        .shape:nth-child(1) { width: 80px; height: 80px; left: 10%; animation-delay: 0s; }
        .shape:nth-child(2) { width: 120px; height: 120px; left: 20%; animation-delay: 2s; }
        .shape:nth-child(3) { width: 60px; height: 60px; left: 70%; animation-delay: 4s; }
        .shape:nth-child(4) { width: 100px; height: 100px; left: 80%; animation-delay: 6s; }

        @keyframes float {
            0% { transform: translateY(100vh) rotate(0deg); opacity: 0; }
            10% { opacity: 1; }
            90% { opacity: 1; }
            100% { transform: translateY(-100px) rotate(360deg); opacity: 0; }
        }

        @keyframes fadeOut {
            from { opacity: 1; transform: translateY(0); }
            to { opacity: 0; transform: translateY(-20px); }
        }

        @keyframes modalSlideIn {
            from { opacity: 0; transform: translate(-50%, -60%) scale(0.8); }
            to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
        }

        @keyframes shake {
            0%, 100% { transform: translateX(0); }
            10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
            20%, 40%, 60%, 80% { transform: translateX(5px); }
        }

        @keyframes glow {
            0% { box-shadow: 0 0 5px rgba(255, 107, 53, 0.5); }
            50% { box-shadow: 0 0 20px rgba(255, 107, 53, 0.8), 0 0 30px rgba(255, 107, 53, 0.6); }
            100% { box-shadow: 0 0 5px rgba(255, 107, 53, 0.5); }
        }

        @keyframes slideDown {
            from { transform: translate(-50%, -100%); opacity: 0; }
            to { transform: translate(-50%, 0); opacity: 1; }
        }

        @keyframes slideUp {
            from { transform: translate(-50%, 0); opacity: 1; }
            to { transform: translate(-50%, -100%); opacity: 0; }
        }

        @keyframes slideInRight {
            from { transform: translateX(100%); opacity: 0; }
            to { transform: translateX(0); opacity: 1; }
        }

        @keyframes slideOutRight {
            from { transform: translateX(0); opacity: 1; }
            to { transform: translateX(100%); opacity: 0; }
        }

        @keyframes pulse {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.05); }
        }

        /* 顶部导航栏 */
        .top-nav {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(20px);
            border-bottom: 1px solid rgba(255, 193, 7, 0.2);
            z-index: 1000;
            padding: 15px 0;
        }

        .nav-content {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .logo {
            font-size: 1.5rem;
            font-weight: bold;
            background: linear-gradient(135deg, #ff6b35, #f7931e);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .user-info {
            display: flex;
            align-items: center;
            gap: 15px;
        }

        .progress-badge {
            background: linear-gradient(135deg, #ff6b35, #f7931e);
            color: white;
            padding: 8px 15px;
            border-radius: 20px;
            font-size: 0.9rem;
            font-weight: 600;
        }

        .back-btn {
            background: rgba(206, 66, 43, 0.1);
            border: 1px solid #ce422b;
            color: #ce422b;
            padding: 8px 16px;
            border-radius: 8px;
            text-decoration: none;
            transition: all 0.3s ease;
        }

        .back-btn:hover {
            background: #ce422b;
            color: white;
        }

        /* 主容器 */
        .main-container {
            margin-top: 80px;
            max-width: 1400px;
            margin: 80px auto 0;
            padding: 20px;
            position: relative;
            z-index: 1;
        }

        /* 关卡选择视图 */
        .level-selector {
            background: rgba(255, 255, 255, 0.95);
            border-radius: 20px;
            padding: 30px;
            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
            backdrop-filter: blur(20px);
        }

        .section-title {
            font-size: 2rem;
            font-weight: 700;
            text-align: center;
            margin-bottom: 10px;
            background: linear-gradient(135deg, #ff6b35, #f7931e);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .section-subtitle {
            text-align: center;
            color: #666;
            margin-bottom: 30px;
            font-size: 1.1rem;
        }

        /* 进度条 */
        .progress-bar {
            height: 8px;
            background: #e9ecef;
            border-radius: 4px;
            overflow: hidden;
            margin-bottom: 20px;
        }

        .progress-fill {
            height: 100%;
            background: linear-gradient(90deg, #ff6b35, #f7931e);
            transition: width 0.5s ease;
        }

        /* 主题关卡网格 */
        .topic-levels {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 25px;
            margin-bottom: 40px;
        }

        .topic-card {
            background: white;
            border-radius: 15px;
            padding: 25px;
            box-shadow: 0 8px 25px rgba(0,0,0,0.1);
            border: 1px solid rgba(255, 193, 7, 0.2);
            transition: all 0.3s ease;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }

        .topic-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 35px rgba(255, 107, 53, 0.15);
        }

        .topic-header {
            display: flex;
            align-items: center;
            margin-bottom: 20px;
        }

        .topic-icon {
            width: 60px;
            height: 60px;
            border-radius: 15px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.8rem;
            margin-right: 15px;
        }

        .topic-ownership { background: linear-gradient(135deg, #ff6b35, #e55a2b); }
        .topic-borrowing { background: linear-gradient(135deg, #f7931e, #e6830c); }
        .topic-lifetimes { background: linear-gradient(135deg, #ff9800, #ff6f00); }
        .topic-traits { background: linear-gradient(135deg, #ff9e80, #ff6e40); }
        .topic-error-handling { background: linear-gradient(135deg, #ffab40, #ff9100); }
        .topic-closures { background: linear-gradient(135deg, #ffd180, #ffab00); }
        .topic-concurrency { background: linear-gradient(135deg, #ffca28, #ffa000); }
        .topic-macros { background: linear-gradient(135deg, #ffd54f, #ff8f00); }
        .topic-pattern-matching { background: linear-gradient(135deg, #ffe082, #ff6f00); }
        .topic-iterators { background: linear-gradient(135deg, #fff176, #ff8f00); }

        .topic-info h3 {
            font-size: 1.4rem;
            margin-bottom: 5px;
            color: #333;
        }

        .topic-info p {
            color: #666;
            font-size: 0.9rem;
        }

        .levels-preview {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
        }

        .level-dot {
            width: 35px;
            height: 35px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.9rem;
            font-weight: 600;
            transition: all 0.3s ease;
        }

        .level-dot.completed {
            background: linear-gradient(135deg, #28a745, #20c997);
            color: white;
        }

        .level-dot.current {
            background: linear-gradient(135deg, #ff6b35, #f7931e);
            color: white;
            animation: pulse 2s infinite;
        }

        .level-dot.locked {
            background: #f1f3f4;
            color: #9aa0a6;
        }

        @keyframes pulse {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.1); }
        }

        /* 挑战游戏视图 */
        .challenge-view {
            display: none;
            background: rgba(255, 255, 255, 0.95);
            border-radius: 20px;
            padding: 30px;
            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
            backdrop-filter: blur(20px);
        }

        .challenge-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 30px;
        }

        .challenge-title {
            font-size: 1.8rem;
            font-weight: 700;
            color: #333;
        }

        .back-button {
            background: #f8f9fa;
            border: none;
            padding: 10px 20px;
            border-radius: 8px;
            cursor: pointer;
            font-size: 0.9rem;
            transition: all 0.3s ease;
        }

        .back-button:hover {
            background: #e9ecef;
            transform: translateX(-2px);
        }

        .challenge-content {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 30px;
            margin-bottom: 30px;
        }

        .code-section {
            background: #1e1e1e;
            border-radius: 15px;
            padding: 25px;
            color: #d4d4d4;
            font-family: 'Consolas', 'Monaco', monospace;
            position: relative;
            overflow: hidden;
        }

        .code-section::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 5px;
            background: linear-gradient(90deg, #ff6b35, #f7931e);
        }

        .code-title {
            color: #ff6b35;
            font-weight: 600;
            margin-bottom: 20px;
            font-size: 1rem;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        .code-template {
            margin-bottom: 20px;
        }

        .code-line {
            padding: 8px 0;
            position: relative;
            transition: all 0.2s ease;
        }

        .code-line:hover {
            background: rgba(255, 255, 255, 0.05);
        }

        .code-line-number {
            color: #858585;
            margin-right: 15px;
            font-size: 0.9rem;
            user-select: none;
        }

        /* 空白区域 */
        .blank-spot {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 100px;
            padding: 10px 15px;
            margin: 0 6px;
            background: linear-gradient(135deg, #ff6b35, #f7931e);
            color: white;
            border-radius: 8px;
            text-align: center;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
            border: 2px solid transparent;
            box-shadow: 0 4px 15px rgba(255, 107, 53, 0.3);
        }

        .blank-spot:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(255, 107, 53, 0.4);
        }

        .blank-spot.filled {
            background: linear-gradient(135deg, #28a745, #20c997);
            color: white;
            box-shadow: 0 4px 15px rgba(40, 167, 69, 0.3);
        }

        .blank-spot.filled:hover {
            box-shadow: 0 8px 25px rgba(40, 167, 69, 0.4);
        }

        .blank-spot.drag-over {
            transform: scale(1.1);
            box-shadow: 0 12px 30px rgba(255, 107, 53, 0.5);
            border-color: #ff6b35;
        }

        .blank-spot .placeholder-text {
            opacity: 0.8;
            font-style: italic;
        }

        .blank-spot.filled .placeholder-text {
            display: none;
        }

        .blank-spot .clear-btn {
            display: none;
            margin-left: 8px;
            background: rgba(255, 255, 255, 0.2);
            border-radius: 50%;
            width: 20px;
            height: 20px;
            font-size: 12px;
            line-height: 20px;
            text-align: center;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .blank-spot.filled .clear-btn {
            display: inline-block;
        }

        .blank-spot .clear-btn:hover {
            background: rgba(255, 255, 255, 0.3);
            transform: scale(1.1);
        }

        .code-fragments {
            background: #f8f9fa;
            border-radius: 15px;
            padding: 25px;
            position: relative;
            overflow: hidden;
        }

        .code-fragments::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 5px;
            background: linear-gradient(90deg, #f7931e, #e6830c);
        }

        .fragments-title {
            color: #333;
            font-weight: 600;
            margin-bottom: 20px;
            font-size: 1rem;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        .fragment-list {
            display: flex;
            flex-direction: column;
            gap: 15px;
            max-height: 400px;
            overflow-y: auto;
            padding-right: 10px;
        }

        .fragment-item {
            background: linear-gradient(135deg, #ff6b35, #f7931e);
            color: white;
            padding: 12px 16px;
            border-radius: 10px;
            cursor: grab;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            margin-bottom: 10px;
            font-family: 'Courier New', monospace;
            font-weight: 600;
            position: relative;
            border: 2px solid transparent;
            box-shadow: 0 4px 15px rgba(255, 107, 53, 0.3);
            user-select: none;
        }

        .fragment-item:hover {
            transform: translateY(-3px) scale(1.02);
            box-shadow: 0 12px 30px rgba(255, 107, 53, 0.4);
            border-color: rgba(255, 255, 255, 0.3);
        }

        .fragment-item:active {
            transform: translateY(-1px) scale(0.98);
        }

        .fragment-item.dragging {
            opacity: 0.7;
            transform: rotate(8deg) scale(1.05);
            cursor: grabbing;
            box-shadow: 0 15px 35px rgba(255, 107, 53, 0.6);
        }

        .fragment-item.used {
            opacity: 0.4;
            cursor: not-allowed;
            background: linear-gradient(135deg, #6c757d, #495057);
            transform: scale(0.95);
            box-shadow: 0 2px 8px rgba(108, 117, 125, 0.3);
        }

        .fragment-item.used:hover {
            transform: scale(0.95);
            box-shadow: 0 2px 8px rgba(108, 117, 125, 0.3);
        }

        /* 代码片段提示 */
        .fragment-item::after {
            content: attr(title);
            position: absolute;
            bottom: 100%;
            left: 50%;
            transform: translateX(-50%);
            background: rgba(0, 0, 0, 0.8);
            color: white;
            padding: 8px 12px;
            border-radius: 6px;
            font-size: 12px;
            white-space: nowrap;
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s ease;
            z-index: 10;
            margin-bottom: 5px;
        }

        .fragment-item:hover::after {
            opacity: 1;
            visibility: visible;
            transform: translateX(-50%) translateY(-5px);
        }

        .controls {
            display: flex;
            gap: 20px;
            justify-content: center;
            margin-top: 40px;
        }

        .btn {
            padding: 15px 30px;
            border: none;
            border-radius: 12px;
            cursor: pointer;
            font-size: 1.1rem;
            font-weight: 600;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            display: inline-flex;
            align-items: center;
            gap: 10px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
            position: relative;
            overflow: hidden;
        }

        .btn::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
            transition: left 0.5s ease;
        }

        .btn:hover::before {
            left: 100%;
        }

        .btn-primary {
            background: linear-gradient(135deg, #ff6b35, #f7931e);
            color: white;
            border: 2px solid transparent;
        }

        .btn-primary:hover {
            transform: translateY(-3px) scale(1.05);
            box-shadow: 0 12px 30px rgba(255, 107, 53, 0.4);
            border-color: rgba(255, 255, 255, 0.3);
        }

        .btn-primary:active {
            transform: translateY(-1px) scale(0.98);
        }

        .btn-secondary {
            background: linear-gradient(135deg, #6c757d, #495057);
            color: white;
            border: 2px solid transparent;
        }

        .btn-secondary:hover {
            transform: translateY(-3px) scale(1.05);
            box-shadow: 0 12px 30px rgba(108, 117, 125, 0.4);
            border-color: rgba(255, 255, 255, 0.2);
        }

        .btn-success {
            background: linear-gradient(135deg, #28a745, #20c997);
            color: white;
            border: 2px solid transparent;
        }

        .btn-success:hover {
            transform: translateY(-3px) scale(1.05);
            box-shadow: 0 12px 30px rgba(40, 167, 69, 0.4);
            border-color: rgba(255, 255, 255, 0.3);
        }

        /* 结果模态框 */
        .result-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.8);
            z-index: 2000;
            justify-content: center;
            align-items: center;
            backdrop-filter: blur(5px);
        }

        .result-content {
            background: linear-gradient(135deg, #ffffff, #f8f9fa);
            padding: 50px;
            border-radius: 20px;
            text-align: center;
            max-width: 600px;
            width: 90%;
            box-shadow: 0 25px 80px rgba(0, 0, 0, 0.3);
            animation: modalSlideIn 0.6s cubic-bezier(0.4, 0, 0.2, 1);
            border: 1px solid rgba(255, 255, 255, 0.2);
        }

        .result-icon {
            font-size: 5rem;
            margin-bottom: 25px;
            animation: bounce 0.8s ease infinite alternate;
        }

        @keyframes bounce {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.2); }
        }

        .result-title {
            font-size: 2.2rem;
            font-weight: 700;
            margin-bottom: 20px;
            color: #333;
        }

        .result-message {
            font-size: 1.2rem;
            color: #666;
            margin-bottom: 35px;
            line-height: 1.6;
        }

        .explanation {
            background: linear-gradient(135deg, #f8f9fa, #e9ecef);
            padding: 25px;
            border-radius: 15px;
            margin-bottom: 35px;
            text-align: left;
            border-left: 4px solid #ff6b35;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
        }

        .explanation h4 {
            color: #333;
            margin-bottom: 15px;
            font-size: 1.3rem;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        /* 响应式设计 */
        @media (max-width: 1200px) {
            .main-container {
                max-width: 95%;
                margin: 80px auto 0;
            }
            
            .challenge-content {
                gap: 25px;
            }
        }

        @media (max-width: 992px) {
            .topic-levels {
                grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
                gap: 20px;
            }
            
            .level-grid {
                grid-template-columns: repeat(4, 1fr);
            }
        }

        @media (max-width: 768px) {
            .challenge-content {
                grid-template-columns: 1fr;
                gap: 20px;
            }
            
            .topic-levels {
                grid-template-columns: 1fr;
            }
            
            .main-container {
                padding: 15px;
                margin-top: 70px;
            }
            
            .nav-content {
                padding: 0 15px;
            }
            
            .section-title {
                font-size: 1.8rem;
            }
            
            .challenge-area {
                padding: 20px;
            }
            
            .code-template {
                font-size: 0.9rem;
                padding: 15px;
            }
            
            .fragment-list {
                max-height: 300px;
            }
            
            .controls {
                flex-direction: column;
                align-items: center;
                gap: 15px;
            }
            
            .btn {
                width: 200px;
                justify-content: center;
            }
            
            .result-content {
                padding: 30px 20px;
                margin: 20px;
            }
            
            .result-icon {
                font-size: 4rem;
            }
            
            .result-title {
                font-size: 1.8rem;
            }
            
            .topic-header {
                flex-direction: column;
                text-align: center;
            }
            
            .topic-icon {
                margin-right: 0;
                margin-bottom: 15px;
            }
        }

        @media (max-width: 576px) {
            .level-grid {
                grid-template-columns: repeat(3, 1fr);
                gap: 10px;
            }
            
            .level-card {
                padding: 15px 10px;
                font-size: 0.9rem;
            }
            
            .fragment-item {
                padding: 8px 12px;
                font-size: 0.85rem;
            }
            
            .blank-spot {
                min-width: 80px;
                padding: 6px 10px;
                font-size: 0.85rem;
            }
            
            .achievement-popup {
                right: 10px;
                left: 10px;
                max-width: none;
            }
            
            .warning-message {
                left: 10px !important;
                right: 10px !important;
                transform: none !important;
                text-align: center;
            }
        }

        @media (max-width: 400px) {
            .level-grid {
                grid-template-columns: repeat(2, 1fr);
            }
            
            .btn {
                width: 100%;
                max-width: 250px;
            }
            
            .code-template {
                font-size: 0.8rem;
                padding: 12px;
            }
        }

        /* 滚动条样式 */
        .fragment-list::-webkit-scrollbar {
            width: 6px;
        }

        .fragment-list::-webkit-scrollbar-track {
            background: #f1f1f1;
            border-radius: 3px;
        }

        .fragment-list::-webkit-scrollbar-thumb {
            background: #c1c1c1;
            border-radius: 3px;
        }

        .fragment-list::-webkit-scrollbar-thumb:hover {
            background: #a8a8a8;
        }
    </style>
</head>
<body>
    <!-- 动态背景 -->
    <div class="floating-shapes">
        <div class="shape"></div>
        <div class="shape"></div>
        <div class="shape"></div>
        <div class="shape"></div>
    </div>

    <!-- 顶部导航栏 -->
    <div class="top-nav">
        <div class="nav-content">
            <div class="logo">
                <i class="fas fa-code me-2"></i>
                Rust代码闯关
            </div>
            <div class="user-info">
                <div class="progress-badge" id="userProgress">0/10 完成</div>
                <a href="/" class="back-btn">
                    <i class="fas fa-arrow-left me-1"></i>
                    返回主页
                </a>
            </div>
        </div>
    </div>

    <!-- 主容器 -->
    <div class="main-container">
        <!-- 关卡选择视图 -->
        <div id="levelSelector" class="level-selector">
            <h1 class="section-title">🎮 Rust代码闯关挑战</h1>
            <p class="section-subtitle">通过拖拽代码片段完成挑战，掌握Rust的核心概念</p>
            
            <div class="progress-bar">
                <div class="progress-fill" id="progressFill" style="width: 0%"></div>
            </div>
            
            <div class="topic-levels" id="topicLevels">
                <!-- 主题关卡将在这里动态生成 -->
            </div>
        </div>

        <!-- 挑战游戏视图 -->
        <div id="challengeView" class="challenge-view">
            <div class="challenge-header">
                <h2 class="challenge-title" id="challengeTitle">挑战标题</h2>
                <button class="back-button" onclick="showLevelSelector()">
                    <i class="fas fa-arrow-left me-1"></i>
                    返回关卡
                </button>
            </div>
            
            <div class="challenge-content">
                <div class="code-section">
                    <div class="code-title">📝 代码模板</div>
                    <div class="code-template" id="codeTemplate">
                        <!-- 代码模板将在这里动态生成 -->
                    </div>
                </div>
                
                <div class="code-fragments">
                    <div class="fragments-title">🔧 代码片段</div>
                    <div class="fragment-list" id="fragmentList">
                        <!-- 代码片段将在这里动态生成 -->
                    </div>
                </div>
            </div>
            
            <div class="controls">
                <button class="btn btn-secondary" onclick="resetChallenge()">
                    <i class="fas fa-redo me-1"></i>
                    重置
                </button>
                <button class="btn btn-primary" onclick="checkAnswer()">
                    <i class="fas fa-check me-1"></i>
                    检查答案
                </button>
                <button class="btn btn-success" onclick="nextLevel()" id="nextLevelBtn" style="display: none;">
                    <i class="fas fa-arrow-right me-1"></i>
                    下一关
                </button>
            </div>
        </div>
    </div>

    <!-- 结果模态框 -->
    <div id="resultModal" class="result-modal">
        <div class="result-content">
            <div class="result-icon" id="resultIcon">🎉</div>
            <h3 class="result-title" id="resultTitle">恭喜通过！</h3>
            <p class="result-message" id="resultMessage">你成功完成了这个挑战！</p>
            
            <div class="explanation" id="explanation" style="display: none;">
                <h4>💡 解释说明</h4>
                <p id="explanationText"></p>
            </div>
            
            <div class="controls">
                <button class="btn btn-secondary" onclick="closeResult()">关闭</button>
                <button class="btn btn-success" id="modalNextBtn" onclick="nextLevelFromModal()" style="display: none;">
                    <i class="fas fa-arrow-right me-1"></i>
                    下一关
                </button>
            </div>
        </div>
    </div>

    <script>
        // 全局变量
        let challengesData = null;
        let currentTopic = null;
        let currentLevelIndex = 0;
        let currentChallenge = null;
        let completedChallenges = [];

        // 初始化
        document.addEventListener('DOMContentLoaded', function() {
            loadChallenges();
            createFloatingShapes();
        });

        // 创建浮动背景
        function createFloatingShapes() {
            const shapesContainer = document.querySelector('.floating-shapes');
            for (let i = 0; i < 6; i++) {
                const shape = document.createElement('div');
                shape.className = 'shape';
                shape.style.left = Math.random() * 100 + '%';
                shape.style.animationDelay = Math.random() * 10 + 's';
                shape.style.animationDuration = (15 + Math.random() * 10) + 's';
                shapesContainer.appendChild(shape);
            }
        }

        // 加载挑战数据
        async function loadChallenges() {
            try {
                const response = await fetch('/api/challenges?user_id=web_user');
                const data = await response.json();
                challengesData = data.challenges;
                updateUserProgress();
                renderTopicLevels();
            } catch (error) {
                console.error('加载挑战数据失败:', error);
                // 使用模拟数据作为后备
                challengesData = {
                    ownership: {
                        title: "所有权系统",
                        description: "学习Rust的所有权概念",
                        icon: "🔑",
                        levels: [
                            {
                                id: 1,
                                title: "基础所有权",
                                code_template: [
                                    "fn main() {",
                                    "    let s1 = _____",
                                    "    let s2 = s1;",
                                    "    println!(\"{}\", s2);",
                                    "}"
                                ],
                                code_fragments: [
                                    { id: 1, code: "String::from(\"hello\")", correct: true, hint: "创建一个新的String实例" },
                                    { id: 2, code: "\"hello\".to_string()", correct: false, hint: "这个不是最佳答案" },
                                    { id: 3, code: "s1.clone()", correct: false, hint: "这里不需要克隆" }
                                ],
                                correct_answer: ["String::from(\"hello\")"],
                                explanation: "当s1被移动到s2后，s1就失效了，这是一种安全的内存管理方式。"
                            }
                        ]
                    },
                    borrowing: {
                        title: "借用检查器",
                        description: "理解Rust的借用规则",
                        icon: "🔗",
                        levels: [
                            {
                                id: 1,
                                title: "可变引用",
                                code_template: [
                                    "fn main() {",
                                    "    let mut s = String::from(\"hello\");",
                                    "    change(_____);",
                                    "    println!(\"{}\", s);",
                                    "}",
                                    "",
                                    "fn change(s: &mut String) {",
                                    "    s.push_str(\" world\");",
                                    "}"
                                ],
                                code_fragments: [
                                    { id: 1, code: "&mut s", correct: true, hint: "需要可变引用" },
                                    { id: 2, code: "&s", correct: false, hint: "不可变引用不能修改" },
                                    { id: 3, code: "s", correct: false, hint: "需要使用引用" }
                                ],
                                correct_answer: ["&mut s"],
                                explanation: "可变引用允许修改数据，但同时只能有一个可变引用。"
                            }
                        ]
                    }
                };
                updateUserProgress();
                renderTopicLevels();
            }
        }

        // 更新用户进度
        function updateUserProgress() {
            if (!challengesData) return;
            
            const totalChallenges = Object.values(challengesData).reduce((total, topic) => total + topic.levels.length, 0);
            const completedCount = completedChallenges.length;
            const progressPercentage = totalChallenges > 0 ? (completedCount / totalChallenges) * 100 : 0;
            
            document.getElementById('userProgress').textContent = `${completedCount}/${totalChallenges} 完成`;
            document.getElementById('progressFill').style.width = `${progressPercentage}%`;
        }

        // 渲染主题关卡
        function renderTopicLevels() {
            const container = document.getElementById('topicLevels');
            container.innerHTML = '';

            if (!challengesData) return;

            Object.entries(challengesData).forEach(([topicId, topicData]) => {
                const card = createTopicCard(topicId, topicData);
                container.appendChild(card);
            });
        }

        // 创建主题卡片
        function createTopicCard(topicId, topicData) {
            const card = document.createElement('div');
            card.className = 'topic-card';
            card.onclick = () => enterTopic(topicId);

            const iconClass = `topic-${topicId}`;
            const icon = getTopicIcon(topicId);

            const levelsHtml = topicData.levels.map((level, index) => {
                const status = getLevelStatus(topicId, index);
                return `<div class="level-dot ${status}">${index + 1}</div>`;
            }).join('');

            card.innerHTML = `
                <div class="topic-header">
                    <div class="topic-icon ${iconClass}">${icon}</div>
                    <div class="topic-info">
                        <h3>${topicData.title}</h3>
                        <p>${topicData.description}</p>
                    </div>
                </div>
                <div class="levels-preview">
                    ${levelsHtml}
                </div>
            `;

            return card;
        }

        // 获取主题图标
        function getTopicIcon(topicId) {
            const icons = {
                'ownership': '🔑',
                'borrowing': '🔗',
                'lifetimes': '⏳',
                'traits': '🎭',
                'error-handling': '⚠️',
                'closures': '📦',
                'concurrency': '🚀',
                'macros': '🔧',
                'pattern-matching': '🎯',
                'iterators': '🔄'
            };
            return icons[topicId] || '📚';
        }

        // 获取关卡状态
        function getLevelStatus(topicId, levelIndex) {
            const challengeId = `${topicId}_${levelIndex + 1}`;
            if (completedChallenges.includes(challengeId)) {
                return 'completed';
            }
            // 如果是第一个关卡或者是前一个关卡已完成
            if (levelIndex === 0 || completedChallenges.includes(`${topicId}_${levelIndex}`)) {
                return 'current';
            }
            return 'locked';
        }

        // 进入主题
        function enterTopic(topicId) {
            currentTopic = topicId;
            currentLevelIndex = 0;
            
            // 找到第一个未完成的关卡
            const topic = challengesData[topicId];
            for (let i = 0; i < topic.levels.length; i++) {
                const challengeId = `${topicId}_${i + 1}`;
                if (!completedChallenges.includes(challengeId)) {
                    currentLevelIndex = i;
                    break;
                }
            }
            
            loadChallenge();
        }

        // 加载挑战
        async function loadChallenge() {
            if (!challengesData || !currentTopic) return;

            const topic = challengesData[currentTopic];
            const level = topic.levels[currentLevelIndex];

            if (!level) return;

            currentChallenge = level;

            // 更新UI
            document.getElementById('challengeTitle').textContent = level.title;
            document.getElementById('levelSelector').style.display = 'none';
            document.getElementById('challengeView').style.display = 'block';

            // 渲染代码模板
            renderCodeTemplate(level.code_template);
            renderFragments(level.code_fragments);
        }

        // 渲染代码模板
        function renderCodeTemplate(template) {
            const container = document.getElementById('codeTemplate');
            container.innerHTML = '';

            template.forEach((line, index) => {
                const lineDiv = document.createElement('div');
                lineDiv.className = 'code-line';
                
                // 检查是否有空白处
                const hasBlank = line.includes('_____');
                
                if (hasBlank) {
                    const parts = line.split('_____');
                    lineDiv.innerHTML = `
                        <span class="code-line-number">${index + 1}</span>
                        ${parts[0]}
                        <span class="blank-spot" data-position="0" 
                              ondrop="dropFragment(event)" 
                              ondragover="allowDrop(event)" 
                              ondragleave="dragLeave(event)"
                              ondblclick="clearBlank(this)">
                            <span class="placeholder-text">拖拽代码</span>
                            <span class="clear-btn" onclick="clearBlank(this.parentElement)">✕</span>
                        </span>
                        ${parts[1] || ''}
                    `;
                } else {
                    lineDiv.innerHTML = `
                        <span class="code-line-number">${index + 1}</span>
                        ${line}
                    `;
                }
                
                container.appendChild(lineDiv);
            });
        }

        // 清除空白处的代码
        function clearBlank(blankElement) {
            if (blankElement.dataset.fragmentId) {
                const fragmentId = blankElement.dataset.fragmentId;
                const fragmentItem = document.querySelector(`[data-id="${fragmentId}"]`);
                if (fragmentItem) {
                    fragmentItem.classList.remove('used');
                    fragmentItem.draggable = true;
                }
            }
            
            blankElement.textContent = '拖拽代码';
            blankElement.classList.remove('filled');
            delete blankElement.dataset.fragmentId;
        }

        // 渲染代码片段
        function renderFragments(fragments) {
            const container = document.getElementById('fragmentList');
            container.innerHTML = '';

            fragments.forEach(fragment => {
                const fragmentDiv = document.createElement('div');
                fragmentDiv.className = 'fragment-item';
                fragmentDiv.draggable = true;
                fragmentDiv.textContent = fragment.code;
                fragmentDiv.dataset.id = fragment.id;
                fragmentDiv.dataset.correct = fragment.correct;
                fragmentDiv.dataset.hint = fragment.hint;

                // 添加悬停提示
                fragmentDiv.title = fragment.hint;

                fragmentDiv.ondragstart = (e) => {
                    e.dataTransfer.setData('text/plain', fragment.code);
                    e.dataTransfer.setData('text/fragmentId', fragment.id);
                    fragmentDiv.classList.add('dragging');
                    
                    // 添加拖拽时的视觉反馈
                    setTimeout(() => {
                        fragmentDiv.style.opacity = '0.5';
                    }, 0);
                };

                fragmentDiv.ondragend = () => {
                    fragmentDiv.classList.remove('dragging');
                    fragmentDiv.style.opacity = '1';
                };

                // 添加点击事件显示提示
                fragmentDiv.onclick = () => {
                    showHint(fragment.hint);
                };

                container.appendChild(fragmentDiv);
            });
        }

        // 显示提示
        function showHint(hint) {
            // 创建提示元素
            const hintDiv = document.createElement('div');
            hintDiv.className = 'hint-tooltip';
            hintDiv.textContent = hint;
            hintDiv.style.cssText = `
                position: fixed;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                background: rgba(0, 0, 0, 0.8);
                color: white;
                padding: 15px 20px;
                border-radius: 8px;
                font-size: 14px;
                z-index: 1000;
                animation: fadeIn 0.3s ease;
            `;
            
            document.body.appendChild(hintDiv);
            
            // 3秒后自动消失
            setTimeout(() => {
                hintDiv.style.animation = 'fadeOut 0.3s ease';
                setTimeout(() => {
                    document.body.removeChild(hintDiv);
                }, 300);
            }, 3000);
        }

        // 拖拽处理
        function allowDrop(e) {
            e.preventDefault();
            e.target.classList.add('drag-over');
            
            // 添加视觉反馈
            e.target.style.background = 'rgba(255, 107, 53, 0.2)';
            e.target.style.border = '2px dashed #ff6b35';
        }

        function dropFragment(e) {
            e.preventDefault();
            e.target.classList.remove('drag-over');
            
            // 重置样式
            e.target.style.background = '';
            e.target.style.border = '';
            
            const code = e.dataTransfer.getData('text/plain');
            const fragmentId = e.dataTransfer.getData('text/fragmentId');
            
            if (e.target.classList.contains('blank-spot')) {
                // 检查是否已经有代码，如果有则释放之前的片段
                if (e.target.dataset.fragmentId) {
                    const oldFragmentId = e.target.dataset.fragmentId;
                    const oldFragmentItem = document.querySelector(`[data-id="${oldFragmentId}"]`);
                    if (oldFragmentItem) {
                        oldFragmentItem.classList.remove('used');
                        oldFragmentItem.draggable = true;
                    }
                }
                
                e.target.textContent = code;
                e.target.dataset.fragmentId = fragmentId;
                e.target.classList.add('filled');
                
                // 添加放置动画
                e.target.style.animation = 'bounce 0.5s ease';
                setTimeout(() => {
                    e.target.style.animation = '';
                }, 500);
                
                // 禁用已使用的片段
                const fragmentItem = document.querySelector(`[data-id="${fragmentId}"]`);
                if (fragmentItem) {
                    fragmentItem.classList.add('used');
                    fragmentItem.draggable = false;
                }
                
                // 播放放置音效（可选）
                playDropSound();
            }
        }

        // 拖拽离开时的处理
        function dragLeave(e) {
            e.target.classList.remove('drag-over');
            e.target.style.background = '';
            e.target.style.border = '';
        }

        // 播放放置音效
        function playDropSound() {
            // 创建简单的音效
            const audioContext = new (window.AudioContext || window.webkitAudioContext)();
            const oscillator = audioContext.createOscillator();
            const gainNode = audioContext.createGain();
            
            oscillator.connect(gainNode);
            gainNode.connect(audioContext.destination);
            
            oscillator.frequency.setValueAtTime(800, audioContext.currentTime);
            oscillator.frequency.exponentialRampToValueAtTime(400, audioContext.currentTime + 0.1);
            
            gainNode.gain.setValueAtTime(0.3, audioContext.currentTime);
            gainNode.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 0.1);
            
            oscillator.start(audioContext.currentTime);
            oscillator.stop(audioContext.currentTime + 0.1);
        }

        // 检查答案
        async function checkAnswer() {
            if (!currentChallenge) return;

            const blanks = document.querySelectorAll('.blank-spot.filled');
            const answers = Array.from(blanks).map(blank => blank.textContent.trim());
            const correctAnswers = currentChallenge.correct_answer;

            // 检查是否所有空白都已填充
            const totalBlanks = document.querySelectorAll('.blank-spot').length;
            if (blanks.length < totalBlanks) {
                showIncompleteWarning();
                return;
            }

            // 检查答案是否正确
            const isCorrect = JSON.stringify(answers.sort()) === JSON.stringify(correctAnswers.sort());

            if (isCorrect) {
                // 标记当前挑战为已完成
                const challengeId = `${currentTopic}_${currentLevelIndex + 1}`;
                if (!completedChallenges.includes(challengeId)) {
                    completedChallenges.push(challengeId);
                    updateUserProgress();
                }
                
                showResult(true, currentChallenge.explanation);
                playSuccessSound();
                showSuccessAnimation();
            } else {
                showResult(false);
                playErrorSound();
                showErrorAnimation();
            }
        }

        // 显示未完成警告
        function showIncompleteWarning() {
            const warningDiv = document.createElement('div');
            warningDiv.className = 'warning-message';
            warningDiv.textContent = '请填写所有空白处后再提交答案！';
            warningDiv.style.cssText = `
                position: fixed;
                top: 20px;
                left: 50%;
                transform: translateX(-50%);
                background: linear-gradient(135deg, #ffc107, #ff9800);
                color: white;
                padding: 15px 25px;
                border-radius: 10px;
                font-weight: 600;
                z-index: 1000;
                animation: slideDown 0.5s ease;
                box-shadow: 0 8px 25px rgba(255, 193, 7, 0.4);
            `;
            
            document.body.appendChild(warningDiv);
            
            // 3秒后自动消失
            setTimeout(() => {
                warningDiv.style.animation = 'slideUp 0.5s ease';
                setTimeout(() => {
                    if (document.body.contains(warningDiv)) {
                        document.body.removeChild(warningDiv);
                    }
                }, 500);
            }, 3000);
        }

        // 播放成功音效
        function playSuccessSound() {
            const audioContext = new (window.AudioContext || window.webkitAudioContext)();
            const oscillator = audioContext.createOscillator();
            const gainNode = audioContext.createGain();
            
            oscillator.connect(gainNode);
            gainNode.connect(audioContext.destination);
            
            // 播放成功音调序列
            const frequencies = [523.25, 659.25, 783.99]; // C, E, G
            const duration = 0.2;
            
            frequencies.forEach((freq, index) => {
                oscillator.frequency.setValueAtTime(freq, audioContext.currentTime + index * duration);
            });
            
            gainNode.gain.setValueAtTime(0.3, audioContext.currentTime);
            gainNode.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + frequencies.length * duration);
            
            oscillator.start(audioContext.currentTime);
            oscillator.stop(audioContext.currentTime + frequencies.length * duration);
        }

        // 播放错误音效
        function playErrorSound() {
            const audioContext = new (window.AudioContext || window.webkitAudioContext)();
            const oscillator = audioContext.createOscillator();
            const gainNode = audioContext.createGain();
            
            oscillator.connect(gainNode);
            gainNode.connect(audioContext.destination);
            
            oscillator.frequency.setValueAtTime(200, audioContext.currentTime);
            oscillator.frequency.exponentialRampToValueAtTime(150, audioContext.currentTime + 0.3);
            
            gainNode.gain.setValueAtTime(0.2, audioContext.currentTime);
            gainNode.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 0.3);
            
            oscillator.start(audioContext.currentTime);
            oscillator.stop(audioContext.currentTime + 0.3);
        }

        // 显示成功动画
        function showSuccessAnimation() {
            // 创建庆祝粒子效果
            createCelebrationParticles();
            
            // 高亮正确答案
            const blanks = document.querySelectorAll('.blank-spot.filled');
            blanks.forEach(blank => {
                blank.style.animation = 'glow 1s ease';
                setTimeout(() => {
                    blank.style.animation = '';
                }, 1000);
            });
        }

        // 显示错误动画
        function showErrorAnimation() {
            const blanks = document.querySelectorAll('.blank-spot.filled');
            blanks.forEach(blank => {
                blank.style.animation = 'shake 0.5s ease';
                setTimeout(() => {
                    blank.style.animation = '';
                }, 500);
            });
        }

        // 创建庆祝粒子效果
        function createCelebrationParticles() {
            const colors = ['#ff6b35', '#f7931e', '#28a745', '#17a2b8', '#ffc107'];
            const particleCount = 30;
            
            for (let i = 0; i < particleCount; i++) {
                const particle = document.createElement('div');
                particle.style.cssText = `
                    position: fixed;
                    width: 8px;
                    height: 8px;
                    background: ${colors[Math.floor(Math.random() * colors.length)]};
                    border-radius: 50%;
                    pointer-events: none;
                    z-index: 999;
                    left: 50%;
                    top: 50%;
                `;
                
                document.body.appendChild(particle);
                
                // 随机动画
                const angle = (Math.PI * 2 * i) / particleCount;
                const velocity = 100 + Math.random() * 200;
                const lifetime = 1000 + Math.random() * 1000;
                
                particle.animate([
                    { transform: 'translate(-50%, -50%) scale(1)', opacity: 1 },
                    { transform: `translate(${Math.cos(angle) * velocity}px, ${Math.sin(angle) * velocity}px) scale(0)`, opacity: 0 }
                ], {
                    duration: lifetime,
                    easing: 'cubic-bezier(0, 0.5, 0.5, 1)'
                }).onfinish = () => {
                    if (document.body.contains(particle)) {
                        document.body.removeChild(particle);
                    }
                };
            }
        }

        // 显示结果
        function showResult(isCorrect, explanation = '') {
            const modal = document.getElementById('resultModal');
            const icon = document.getElementById('resultIcon');
            const title = document.getElementById('resultTitle');
            const message = document.getElementById('resultMessage');
            const explanationDiv = document.getElementById('explanation');
            const explanationText = document.getElementById('explanationText');
            const nextBtn = document.getElementById('modalNextBtn');

            if (isCorrect) {
                icon.textContent = '🎉';
                title.textContent = '恭喜通过！';
                message.textContent = '你成功完成了这个挑战！';
                explanationDiv.style.display = explanation ? 'block' : 'none';
                if (explanation) {
                    explanationText.textContent = explanation;
                }
                nextBtn.style.display = 'block';
                
                // 添加通关成就
                showAchievement('挑战完成！', '你成功完成了这个关卡');
            } else {
                icon.textContent = '😔';
                title.textContent = '再试一次！';
                message.textContent = '答案不正确，看看提示再试试吧！';
                explanationDiv.style.display = 'none';
                nextBtn.style.display = 'none';
                
                // 添加智能提示
                const hint = getHintForCurrentChallenge();
                if (hint) {
                    explanationDiv.style.display = 'block';
                    explanationText.textContent = hint;
                }
            }

            modal.style.display = 'block';
        }

        // 获取当前挑战的智能提示
        function getHintForCurrentChallenge() {
            if (!currentChallenge || !currentChallenge.fragments) return '';
            
            // 分析错误模式，给出具体提示
            const blanks = document.querySelectorAll('.blank-spot.filled');
            const answers = Array.from(blanks).map(blank => blank.textContent.trim());
            const correctAnswers = currentChallenge.correct_answer;
            
            if (answers.length !== correctAnswers.length) {
                return '💡 提示：请确保填写了所有空白处！';
            }
            
            // 检查是否有部分正确答案
            const correctCount = answers.filter(answer => correctAnswers.includes(answer)).length;
            if (correctCount > 0) {
                return `💡 提示：你有 ${correctCount}/${correctAnswers.length} 个答案正确，继续加油！`;
            }
            
            // 查看代码片段中的提示
            const hintFragments = currentChallenge.fragments.filter(f => f.is_hint);
            if (hintFragments.length > 0) {
                return `💡 提示：${hintFragments[0].content}`;
            }
            
            return '💡 提示：仔细思考每个代码片段的作用和位置！';
        }

        // 显示成就
        function showAchievement(title, description) {
            const achievement = document.createElement('div');
            achievement.className = 'achievement-popup';
            achievement.innerHTML = `
                <div class="achievement-icon">🏆</div>
                <div class="achievement-content">
                    <div class="achievement-title">${title}</div>
                    <div class="achievement-description">${description}</div>
                </div>
            `;
            
            achievement.style.cssText = `
                position: fixed;
                top: 20px;
                right: 20px;
                background: linear-gradient(135deg, #ffd700, #ffed4e);
                color: #333;
                padding: 20px;
                border-radius: 15px;
                box-shadow: 0 10px 30px rgba(255, 215, 0, 0.3);
                z-index: 1000;
                display: flex;
                align-items: center;
                gap: 15px;
                animation: slideInRight 0.5s ease;
                border: 2px solid #ffd700;
            `;
            
            document.body.appendChild(achievement);
            
            // 5秒后自动消失
            setTimeout(() => {
                achievement.style.animation = 'slideOutRight 0.5s ease';
                setTimeout(() => {
                    if (document.body.contains(achievement)) {
                        document.body.removeChild(achievement);
                    }
                }, 500);
            }, 5000);
        }

        // 关闭结果模态框
        function closeResult() {
            document.getElementById('resultModal').style.display = 'none';
        }

        // 下一关
        function nextLevel() {
            if (!challengesData || !currentTopic) return;

            const topic = challengesData[currentTopic];
            if (currentLevelIndex < topic.levels.length - 1) {
                currentLevelIndex++;
                loadChallenge();
            } else {
                showLevelSelector();
            }
        }

        function nextLevelFromModal() {
            closeResult();
            nextLevel();
        }

        // 重置挑战
        function resetChallenge() {
            if (!currentChallenge) return;

            // 清除所有填充的空白
            const blanks = document.querySelectorAll('.blank-spot.filled');
            blanks.forEach(blank => {
                blank.textContent = '拖拽代码';
                blank.classList.remove('filled');
                delete blank.dataset.fragmentId;
            });

            // 重新启用所有片段
            const fragments = document.querySelectorAll('.fragment-item.used');
            fragments.forEach(fragment => {
                fragment.classList.remove('used');
                fragment.draggable = true;
            });
        }

        // 返回关卡选择
        function showLevelSelector() {
            document.getElementById('challengeView').style.display = 'none';
            document.getElementById('levelSelector').style.display = 'block';
            currentChallenge = null;
            renderTopicLevels(); // 重新渲染以更新状态
        }

        // 点击模态框外部关闭
        document.getElementById('resultModal').addEventListener('click', function(e) {
            if (e.target === this) {
                closeResult();
            }
        });
    </script>
</body>
</html>